import React from "react";
import {createStyles} from "antd-style";
import HeaderMenu from "@/pages/HomePage/HeaderMenu.tsx";
import HeaderButton from "@/pages/HomePage/HeaderButton.tsx";
import {SettingOutlined} from "@ant-design/icons";
import {useNavigate} from "react-router";

export const homeHeaderHeight = 50

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            display: grid;
            backdrop-filter: blur(15px);
            grid-template-columns: 1fr 1fr 1fr;
            align-items: center;
            justify-items: center;
            height: ${homeHeaderHeight}px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            max-width: 1200px;
            margin: 0 auto;
            z-index: 200;
            
            .right {
                display: flex;
            }
        `,
        centerButton: css`
            display: block;
            width: auto;
            height: ${homeHeaderHeight}px;
            color: ${token.colorText};
            transition: all .2s;
            border: none;
            background-color: transparent;
            font-size: 20px;
            padding: 0 20px;
            text-shadow: 0 0 0 transparent;
            text-wrap: nowrap;
            
            &:hover {
                font-size: 22px;
                color: ${token.colorPrimary};
                text-shadow: 0 0 10px ${token.colorPrimary};
                cursor: pointer;
            }
        `,
    }
})

interface Prop {
    setShowSettingDrawer: (show: boolean) => void
}

const HomeHeader: React.FC<Prop> = ({setShowSettingDrawer}) => {
    const styles = useStyles().styles;
    const navigate = useNavigate()

    return (
        <>
            <header className={styles.container}>
                <HeaderMenu/>
                <button className={styles.centerButton}
                        onClick={() => {
                            navigate("/home")
                        }}
                >
                    微 NAS
                </button>
                <div className="right">
                    <HeaderButton
                        content="外观设置"
                        icon={<SettingOutlined/>}
                        onClick={() => {
                            setShowSettingDrawer(true)
                        }}
                    />
                </div>
            </header>
        </>
    )
}

export default HomeHeader
